<template>
	<view class="container">
	  <view class="cover">
	    <image :src="baseUrl+articleDetailData.cover" />
	  </view>
	  <view class="text">
	    <view class="title">
	      <text>{{articleDetailData.title}}</text>
	      <view>{{category_name}}</view>
	    </view>
	    <view class="intro">
	      <text>{{articleDetailData.intro}}</text>
	    </view>
	    <view class="content">
			<rich-text :nodes="articleDetailData.content"></rich-text>
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import request from '../../utils/request.js'
	
	const baseUrl = 'http://127.0.0.1:5000/'  // 图片路径
	const articleDetailData = ref({})  // 文章详情数据
	const category_name = ref('')  // 分类名称数据
	
	onLoad((options) => {
		console.log(options.article_id);
		getArticleDetailById(options.article_id);
	})
	
	//  通过文章id获取文章数据
	const getArticleDetailById = async (article_id) => {
		let result = await request.get('/articleDetailById', {params: { article_id }})
		// 通过id获取分类名称
		const category_id = result.category_id
		let nameResult = await request.get('/categoryNameById', {params: { category_id }})
		articleDetailData.value = result
		category_name.value = nameResult
	}
	
	
</script>

<style>
.container{
  background-color: #f1f1f1;
}
.cover{
  background-color: white;
  margin: 10px;
  border-radius: 10px;
}
.cover image {
  margin: 30px;
  border-radius: 10px;
}
.text {
  background-color: white;
  margin: 10px;
  border-radius: 10px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.title text {
  font-size: 30px;
  font-weight: bolder;
  margin-right: 20px;
}
.title view {
  background-color: #f6f8fa;
  width: 70px;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #f1f1f1;
}
.intro {
  padding: 10px;
  display: flex;
  justify-content: center;
  font-size: 18px;
  margin-top: 10px;
}
</style>
